<template>
  <div>
    <!-- 卡片视图区 -->
    <el-card>
      <!-- 搜索区 -->
       <el-row :gutter="20">
       
        <el-col :span="4">
          <el-button type="primary"
                     @click="AddDialogVisible = true" >添加会议室</el-button>
        </el-col>
      </el-row>

      <!-- 用户列表区 -->
      <el-table :data="roomList"
                border
                stripe>
        <el-table-column label="会议室id" prop="roomId"></el-table-column>
        <el-table-column label="会议室名称" prop="bName"></el-table-column>
        <el-table-column label="会议室类型">
          <template slot-scope="scope">
            {{typeJudge(scope.row.btype)}}
          </template>
        </el-table-column>
        
        <el-table-column label="备注" prop="bremark"></el-table-column>
        <el-table-column label="可容纳人数" prop="capacities"></el-table-column>

          
        
        <el-table-column label="操作"
                         width="180px">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-tooltip effect="dark"
                        content="修改"
                        placement="top"
                        :enterable="false">
              <el-button type="primary"
                         icon="el-icon-edit"
                         size="mini"
                         @click="showUpd(scope.row.roomId)"></el-button>
            </el-tooltip>
            <!-- 删除按钮 -->
            <el-tooltip effect="dark"
                        content="删除"
                        placement="top"
                        :enterable="false">
              <el-button type="danger"
                         icon="el-icon-delete"
                         size="mini"
                         @click="doDel(scope.row.roomId)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination @current-change="handleCurrentChange"
                     :current-page="current"
                     :page-size="5"
                     layout="prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>

    <!-- 添加会议室的对话框 -->
    <el-dialog title="添加会议室"
               :visible.sync="AddDialogVisible"
               width="70%"
               @close="AddDialogClosed">
      <!-- 内容主体  名称 类型 状态 备注 人数-->
      <el-form :model="addForm"
               ref="addFormRef"
               label-width="100px">
        <el-form-item label="房间名称"
                      prop="bName">
          <el-input v-model="addForm.bName"></el-input>
        </el-form-item>
        

        <el-form-item label="房间类型"
                      prop="bType">
          <el-select v-model="addForm.btype"
                     placeholder="请选择">
            <el-option v-for="item in options_type"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="备注"
                      prop="bType">
          <el-input v-model="addForm.bremark"></el-input>
        </el-form-item>
        <el-form-item label="可容纳人数"
                      prop="upwd">
          <el-input v-model="addForm.capacities"></el-input>
        </el-form-item>

      </el-form>
      <!-- 底部按钮区 -->
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="AddDialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="addRoom">确 定</el-button>
      </span>
    </el-dialog>


    <!-- 修改会议室的对话框 -->
    <el-dialog title="修改会议室"
               :visible.sync="updDialogVisible"
               width="50%"
               @close="updDialogClosed">
      <!-- 内容主体 -->
      <el-form :model="eidtForm"
               ref="editFormRef"
               label-width="70px">
        <el-form-item label="房间名">
          <el-input v-model="eidtForm.bName" disabled></el-input>
        </el-form-item>
        
        <el-form-item label="房间类型"
                      prop="bType">
          <el-select v-model="eidtForm.btype"
                     placeholder="请选择">
            <el-option v-for="item in options_type"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注"
                      prop="bType">
          <el-input v-model="eidtForm.bremark"></el-input>
        </el-form-item>
        <el-form-item label="可容纳人数"
                      prop="upwd">
          <el-input v-model="eidtForm.capacities"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部按钮区 -->
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="updDialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="doUpd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        roomList: [],
        room: {
          roomId: '',
          bName: '',
          btype: '',
          bremark: '',
          capacities: '',
        },
        //控制对话框的显示与隐藏
        AddDialogVisible: false,
        updDialogVisible: false,
        addForm: {
          roomId: '',
          bName: '',
          bType: '',
          bRemark: '',
          capacities: ''
        },
        options_type: [
          {
            value: '0',
            label: '普通'
          },
          {
            value: '1',
            label: '电话'
          },
          {
            value: '2',
            label: '电视'
          }
        ],
        eidtForm:{
          roomId: '',
          bName: '',
          btype: '',
          bremark: '',
          capacities: ''
        },
        current: 1,
        total: 0
      }
    },
    created() {
      this.getRoomList();
    },
    methods: {
      typeJudge(btype){
        if (btype=='0'){
          return '普通会议室'
        }else if (btype == '1'){
          return '电话会议室'
        }else if (btype=='2'){
          return '电视会议室'
        }

      },
      async getRoomList() {
        let param = this.$qs.stringify({
          current: this.current
        })
        let url = 'admin/room/roomList' + '?' + param;
        // let params = this.room;
        const {data: res} = await this.$axios.get(url);
        if(res.code !== 200){
          return this.$message.error(res.data);
        }
        this.total = res.data.total;
        this.roomList = res.data.records;
        
      },
      handleCurrentChange(newPage) {
        this.current = newPage
        this.getRoomList()
      },
      doQuery(){
        this.getRoomList();
      },
      //监听添加对话框的关闭事件
      AddDialogClosed() {
        this.$refs.addFormRef.resetFields();
      },
      //添加房间
      addRoom() {
        let url = 'admin/room/roomSave'
        let param = this.addForm
        this.$refs.addFormRef.validate(async (valid) => {
          if (!valid) return;
          console.log("addForm:"+this.addForm.bName+this.addForm.btype);
          const { data: res } = await this.$axios.post(url, param);
          if (res.code !== 200) {
            return this.$message.error(res.data);
          }
          this.AddDialogVisible = false;
          this.getRoomList();
          this.$message.success(res.data);
        })
      },
      updDialogClosed(){
        this.$refs.eidtFormRef.resetFields();
      },
      doUpd(){
        let url = 'admin/room/roomUpdate';
        let roomVo = this.eidtForm;
        console.log(this.eidtForm);
        this.$refs.editFormRef.validate(async (valid) => {
          if (!valid) return;
          const { data: res } = await this.$axios.post(url, roomVo);
          if (res.code !== 200) {
            return this.$message.error(res.data);
          }
          this.updDialogVisible = false;
          this.getRoomList();
          this.$message.success(res.data);
        })
      },

      async showUpd(room_id){
        let url = 'admin/room/selRoom?roomId=' + room_id;
        const {data: res} = await this.$axios.get(url)
        if(res.code !== 200){
          return this.$message.error(res.data);
        }
        this.eidtForm = res.data;
        this.updDialogVisible = true;
      },
      //根据id删除对应的信息
      async doDel(room_id) {
        //弹框询问
        const res = await this.$confirm('此操作将永久删除该会议室, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(error => 
            error
          )
        //确认删除，返回值为字符串 confirm
        //取消删除，返回值为字符串 cancel
        if(res !== 'confirm'){
          return this.$message.info('您取消了删除！')
        }
        let url = 'admin/room/roomDelete?roomId='+room_id;
        this.$axios.delete(url)
          .then(res => {
            if(res.data.code !== 200){
              return this.$message.error(res.data);
            }
            this.$message.success(res.data);
            this.getRoomList();
          })
          .catch( err => 
            err
          )
      },
    }
  }
</script>

<style>

</style>